// 这种方式引入，则是将引入的函数写到主包中,这叫即时引入。
import anotherModule from './another-module.js'
// 使用import方法代替require动态引入模块。import方法返回一个promise对象。
function getComponent() {
    /** 这地方这个注释是必不可少的：/* webpackChunkName: "lodash" */ /**否则生成的分片就以自动的数字索引来命名*/
    /*{ default: _ } 指的是引入后的名字，这里需要人工指定一个命名空间default*/
    return import(/* webpackChunkName: "lodash" */ 'lodash').then(({ default: _ }) => {
        const element = document.createElement('div');
        element.innerHTML = _.join(['Hello', 'webpack， My name is Tony! '], ' ');
        return element;
    }).catch(error => 'An error occurred while loading the component');
}

// 简化代码, 使用异步关键字：async  + await 这需要babel预处理插件
async function getComponentSimplify() {
    const element = document.createElement('div');
    const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash');
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    return element;
}

getComponent().then(component => {
    document.body.appendChild(component);
})
anotherModule();
